<template>
  <div class="book">
    <ul><li :class="{active: curIndex === index}" :key="index" v-for="(dto, index) in conf.list" @click="setIndex(index)">{{dto.name}}</li></ul>
    <ul ref="wrap" @scroll="onScroll"><slot></slot></ul>
  </div>
</template>
<script>
/**
 * conf.list 渲染左侧目录的数据
 * slot 将根据slot的最然层元素进行定位
 * */
export default {
  name: 'popup',
  props: ["conf"],
  data() {return {curIndex: 0}},
  methods: {
    setIndex(index){
      this.curIndex = index;
      // this.$slots.default[index].elm.scrollIntoView();
      this.$refs.wrap.scrollTop = this.$slots.default[index].elm.offsetTop;
    },
    onScroll(){
      const scrollTop = this.$refs.wrap.scrollTop;
      const tops = this.$slots.default.map(item => item.elm.offsetTop);
      // 获取最后一个小于等于 某值的数
      let ret = 0;
      tops.some((item, index) => {
        if (item <= scrollTop) ret = index + 1;
        else return true;
      });
      this.curIndex = ret;
    }
  },
}
</script>
<style scoped>
  .book {
    height: 300px;
    display: flex;
  }
  .book>ul:first-child{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }
  .book>ul:first-child>li{
    display: block;
    color: #fff;
    line-height: 30px;
    background-color: var(--cl-major);
    padding: 0 10px;
    transition: all .3s;
  }
  .book>ul:first-child>li:hover{
    background-color: var(--cl-major-hover);
  }
  .book>ul:first-child>li:active{
    background-color: var(--cl-major-active);
  }
  .book>ul:first-child>li.active{
    background-color: var(--cl-major-active-c);
  }
  .book>ul:last-child{
    overflow: auto;
    flex: 1 1 0;
  }
  .book>ul:last-child>li>div{
    height: 200px;
    border-top: 1px solid #eee;
  }
</style>
